<template>
  <div
    class="sub_title font-size-[16px] flex items-center mb-3 mt-3"
    :style="{ width: width, height: height }"
  >
    <div class="sub_title_content flex items-center w-[100%]">
      <img
        src="@/assets/imgs/xiamen/title1.png"
        class="w-[10px] h-[26px] cursor-pointer mt-1"
      />
      <span class="color-[#000] font-size-[18px] ml-2 flex-1">
        {{ title }}</span
      >
      <div>
        <span
          @click="open"
          class="color-[#608EF5]"
          :style="{ visibility: visibility2 }"
          >开启/</span
        ><span class="color-[#608EF5]" @click="close2"    :style="{ visibility: visibility3 }">关闭直播画面</span>
        <img
          @click="close"
          src="@/assets/imgs/xiamen/tobig.png"
          class="w-[14px] h-[14px] cursor-pointer ml-3"
          :style="{ visibility: visibility }"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
// import img from "@/assets/imgs/title.png";
defineProps({
  title: { type: String, required: true, default: () => "标题" },
  width: { type: String, required: false, default: () => "360" },
  height: { type: String, required: false, default: () => "40" },
  // backgroundImage: {
  //   type: String,
  //   required: true,
  //   default: () => `url(${img})`,
  // },
  visibility: {
    type: String,
    required: true,
    default: () => "hidden",
  },
  visibility2: {
    type: String,
    required: true,
    default: () => "hidden",
  },
  visibility3: {
    type: String,
    required: true,
    default: () => "hidden",
  },
});
import { defineEmits } from "vue";
const emit = defineEmits(["close", "open", "close2"]);

function close() {
  emit("close", null);
}
// 直播方法
function open() {
  emit("open", null);
}
function close2() {
  emit("close2", null);
}
</script>

<style lang="scss" scoped>
.sub_title {
  // background-size: 100% 100%;
  // background-image: "@/assets/imgs/title.png";
  //  border: 1px solid #000;
  .sub_title_content {
    span {
      font-weight: bold;
    }
    justify-content: space-around;
  }
}
</style>
